<template>
  <div class="map-show" @click="initState">
    <!-- 侧边栏 -->
    <aside class="side-bar">
      <ul class="bar">
        <li v-for="(item,index) in selectBarData" :key="'bar'+index" @click="selectBar(index)" :class="activeBar == index?'active':''">
          <p><span :class="item.icon"></span></p>{{item.text}}
        </li>
      </ul>
      <div class="contents">
        <div class="content" :class="activeBar === 0?'activity':''">
          <div class="padd">
            <!-- 搜索框 -->
            <el-input size="small" placeholder="请输入内容" v-model="keywords" style="margin-bottom:20px" @keyup.enter.native="handleSearch">
              <i style="cursor: pointer" class="el-icon-search el-input__icon" slot="suffix" @click="handleSearch">
              </i>
            </el-input>
            <!-- 搜索结果列表 -->
            <ul class="search-condition" v-show="keywordVisible">

              <li v-for="(item, index) in searchParams.keywords" :key="index">
                <span>{{item}}</span>
                <i class="el-icon-error" @click="handleDeleteSearch(index)"></i>
              </li>
            </ul>
            <!-- 对象类型 -->
            <el-select v-model="searchParams.objectType" placeholder="请选择" style="padding-bottom:20px;width:100%" size="mini" @change="handleObjectType">
              <el-option value="socialaccount" label="实体">实体</el-option>
              <el-option value="socialdynamic" label="事件">事件</el-option>
              <el-option value="keyfigures" label="重点人物">重点人物</el-option>
              <el-option value="focusgroup" label="重点组织">重点组织</el-option>
              <el-option value="document" label="文档">文档</el-option>
              <el-option value="media" label="多媒体">多媒体</el-option>
            </el-select>
            <!-- 属性类型 -->
            <el-select v-model="objectTypeCount" @change="handleObjectTypeCount" placeholder="请选择" style="width:100%" size="mini">
              <el-option v-for="item in sxTypeList" :key="item.uri" :value="item.uri" :label="item.displayname">
              </el-option>
            </el-select>
          </div>
        </div>
        <div class="content" :class="activeBar === 1?'activity':''">
          <div class="padd">
            <div class="navbar-search">
              <ul class="workspaces-list">
                <li draggable class="w-mine wid-id1" v-for="(item,index) in loadTreeList" :key="item.id" :class="[{active:index == activeNum}]" @click="handleChooseGroupId(index,item.id,item.displayname)">
                  <a><i class="fa fa-file-o" style="padding-right: 10px;"></i>{{item.displayname}}</a>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 搜索结果列表 -->
      <div class="searchList">
        <transition name="slide-fade">
          <template>
            <div class="searchList_content" v-if="activeBar === 0 && entryList.length>0 && !searchLoading" id="result">
              <ul class="search-result">
                <li draggable="true" v-for="(item,index) in entryList" :key="index" @dragstart="dragstart($event, item)" @dragend="dragend($event,index,item)" @click="handleChooseSearchClick($event,index,item)" :class="[{active:item.active}]">
                  <!--
                      @click.shift="handleChooseSearch($event,index)"
                      @click.ctrl="handleChooseSearchCtrl($event,index)"
                     -->
                  <div>
                    <span class="search-result-img preview" :style="{backgroundImage: `url(${item.iconUrl})`}">
                    </span>
                    <span class="search-result-container">
                      <span class="search-info">
                        {{item.showName ? item.showName : (item.displayName)}}
                      </span>
                      <p class="search-info-info">
                        {{item.name}}
                      </p>
                    </span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="searchList_content loading" v-else-if="searchLoading">
              <span class="fa fa-circle-o-notch fa-spin"></span>加载中
            </div>
          </template>
        </transition>
        <transition name="slide-fade">
          <template>
            <div class="searchList_content" v-if="activeBar === 1 && groupList.length>0 && !FZLoading" id="FZresult">
              <ul class="search-result">
                <li draggable="true" v-for="(item,index) in groupList" :class="[{groupActive:item.active}]" @dragstart="dragstart($event, item)" @dragend="dragend($event,index,item)" :key="index" @click="handleChooseSearchClick($event,index,item)">
                  <div>
                    <span class="search-result-img preview" :style="{backgroundImage: `url(${item.iconUrl})`}">
                    </span>
                    <span class="search-result-container">
                      <span class="search-info">
                        {{item.showName ? item.showName : (item.displayName)}}
                      </span>
                      <p class="search-info-info">
                        {{item.name}}
                      </p>
                    </span>
                  </div>
                </li>
              </ul>
            </div>
            <div class="searchList_content loading" v-else-if="FZLoading">
              <span class="fa fa-circle-o-notch fa-spin"></span>加载中
            </div>
          </template>
        </transition>
      </div>
      <div class="timelineBar">
        <div class="contentLine">
          <time-line :getSnapshotList="getSnapshotList" :groupDisplayName="groupDisplayName" v-bind:historyName.sync="historyName" ref="timeLine">
          </time-line>
        </div>
      </div>
    </aside>
    <!-- main -->
    <div class="main">
      <!-- 工具栏 -->
      <div class="tootip">
        <tooTip :map="map" :markerList="allMark" ref="tooTip"></tooTip>
      </div>
      <div class="map" id="allmap" @click="clearInit()"></div>
    </div>
    <!-- 详细信息 -->
    <div class="detail-pane right_info animated" :class="infoVisiable" v-if="infoVisiable">
      <div class="content">
        <div class="type-content org-visallo-layout-root" style="flex-direction: column;display: flex;">
          <div class="detail-pane-head">
            <div class="detail-text-left">
              <p>{{nodesParmas.showName ? nodesParmas.showName : nodesParmas.displayname}}</p>
              <p>{{nodesParmas.name}}</p>
            </div>
            <div class="detail-pane-right" :style="{backgroundImage: `url(${nodesParmas.image})`}"></div>
          </div>

          <!--属性添加按钮-->
          <div class="org-visallo-toolbar">
            <ul>
              <li class="has-submenu no-event">
                <a href="javascript:;">
                  <strong>查看</strong>
                </a>
                <ul>
                  <li class=" hide-in-fullscreen-details" @click="viewObjectInfo(nodesParmas.objecttype,nodesParmas.rowkey,nodesParmas.objecturi,nodesParmas.name,nodesParmas.displayname,nodesParmas.image,nodesParmas.showName,'false',nodesParmas.belongGroup)">

                    <a href="javascript:;">
                      查看
                      <div class="subtitle">
                        在新窗口/标签中打开
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="has-submenu no-event">
                <a href="javascript:;">
                  <strong>属性</strong>
                </a>
                <ul>
                  <li class=" hide-in-fullscreen-details" @click="getproperty(nodesParmas.objecturi)">
                    <a href="javascript:;">
                      属性
                      <div class="subtitle">
                        向实体添加属性
                      </div>
                    </a>
                  </li>
                </ul>
              </li>
              <li class="has-submenu  pull-right no-event">
                <a href="javascript:;" class="icon">
                  <strong style="">&nbsp;</strong>
                </a>
                <ul>
                  <li class=" requires-EDIT" data-event="deleteItem" @click="handleDeleteNode">
                    <a>
                      移除实体
                      <div class="subtitle">从画布中移除</div>
                    </a>
                  </li>
                </ul>
              </li>
            </ul>
          </div>

          <!--属性信息选择添加-->
          <div class="overflow-layout" style="flex: 1 1 auto; overflow: auto; position: relative;">
            <div class="property-input">
              <div class="form" v-if="showSelect">
                <el-form ref="addAttribute" :model="addAttribute">
                  <el-form-item>
                    <el-select value-key="displayname" style="width: 100%;" size="small" v-model="addAttribute" @change="handleChoosePropertyUri" placeholder="请选择属性">
                      <el-option v-for="(itemObj,index) in findOperateListModelAll" :label="itemObj.displayname" :value="itemObj" :key="index"></el-option>
                      <el-button type="primary" class="addProperty" @click="addProperty">
                        添加属性
                      </el-button>
                    </el-select>
                  </el-form-item>

                  <el-form-item v-if="addAttribute.propertyType == 'GisData'">
                    <el-input placeholder="请输入经度" v-model="addAttributeSave.longitude"></el-input>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'GisData'">
                    <el-input placeholder="请输入纬度" v-model="addAttributeSave.latitude"></el-input>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'GisData'">
                    <el-input placeholder="请输入描述" v-model="addAttributeSave.address"></el-input>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'TimeInterval'">
                    <el-date-picker style="width: 100%" v-model="addAttributeSave.timeStart" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'TimeInterval'">
                    <el-date-picker style="width: 100%" v-model="addAttributeSave.timeEnd" type="datetime" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'DateTime'">
                    <el-date-picker v-model="addAttributeSave.value" type="datetime" style="width: 100%;" placeholder="选择日期">
                    </el-date-picker>
                  </el-form-item>
                  <el-form-item v-if="addAttribute.propertyType == 'String'">
                    <el-input :placeholder="`请输入${addAttribute.name}`" v-model="addAttributeSave.value"></el-input>
                  </el-form-item>
                  <el-form-item style="text-align: right">
                    <el-button size="small" @click="handleCannel">取消</el-button>
                    <el-button size="small" type="primary" @click="handleCreateAttr()">立即创建</el-button>
                  </el-form-item>
                </el-form>
              </div>

              <div class="table-attribute">
                <table>
                  <tr v-for="(item,index) in propertyList">
                    <td class="property-name" colspan="2">{{item.propertyName}}</td>
                    <td class="property-value" colspan="5">
                      <div class="box_outer" v-if="item.propertyType == 'TimeInterval'">
                        <p v-for="(itemValue,index1) in item.propertyValues">
                          <template v-if="!itemValue.readOnly">
                            <span class="TimeIntervalSpan">
                              <el-date-picker v-model="itemValue.value.timeStart" type="datetime" size="mini" :disabled="protypeIndex!=(index+'-'+index1)">
                              </el-date-picker>
                              <p>-</p>
                              <el-date-picker v-model="itemValue.value.timeEnd" type="datetime" size="mini" :disabled="protypeIndex!=(index+'-'+index1)">
                              </el-date-picker>
                            </span>
                          </template>
                          <template v-else>
                            <span>{{itemValue.value.timeStart}} - {{itemValue.value.timeEnd}}
                            </span>
                          </template>
                          <template v-if="!itemValue.readOnly">
                            <template v-if="isShowSave && protypeIndex==(index+'-'+index1)">
                              <el-button type="primary" size="mini" @click="editProtype(item,itemValue)">保存</el-button>
                              <el-button type="info" size="mini" @click="backEdit">取消</el-button>
                            </template>
                            <template v-else>
                              <i @click="delProtype(index,item,itemValue)" title="删除" class="el-icon-remove pointer"></i>
                              <i @click="openSave(index,index1,itemValue)" title="编辑" class="el-icon-edit-outline pointer"></i>
                            </template>
                          </template>
                        </p>
                      </div>
                      <div class="box_outer" v-else-if="item.propertyType == 'GisData'">
                        <p v-for="(itemValue,index1) in item.propertyValues">
                          <span class="GisData" v-if="!itemValue.readOnly">
                            <el-input v-model="itemValue.value.address" size="mini" :disabled="protypeIndex!=(index+'-'+index1)"></el-input>
                            <div class="latLon">
                              <el-input v-model="itemValue.value.longitude" size="mini" :disabled="protypeIndex!=(index+'-'+index1)"></el-input>
                              <el-input v-model="itemValue.value.latitude" size="mini" :disabled="protypeIndex!=(index+'-'+index1)"></el-input>
                            </div>
                          </span>
                          <span class="GisData" v-else>{{itemValue.value.address}} {{itemValue.value.longitude}}{{itemValue.value.latitude}}</span>
                          <template v-if="!itemValue.readOnly">
                            <template v-if="isShowSave && protypeIndex==(index+'-'+index1)">
                              <el-button type="primary" size="mini" @click="editProtype(item,itemValue)">保存</el-button>
                              <el-button type="info" size="mini" @click="backEdit">取消</el-button>
                            </template>
                            <template v-else>
                              <i @click="delProtype(index,item,itemValue)" title="删除" class="el-icon-remove pointer"></i>
                              <i @click="openSave(index,index1,itemValue)" title="编辑" class="el-icon-edit-outline pointer"></i>
                            </template>
                          </template>
                        </p>
                      </div>
                      <div class="box_outer" v-else-if="item.propertyType == 'DateTime'">
                        <p v-for="(itemValue,index1) in item.propertyValues">
                          <span v-if="!itemValue.readOnly">
                            <el-date-picker v-model="itemValue.value" type="datetime" size="mini" :disabled="protypeIndex!=(index+'-'+index1)">
                            </el-date-picker>
                          </span>
                          <span v-else>
                            {{itemValue.value}}
                          </span>
                          <template v-if="!itemValue.readOnly">
                            <template v-if="isShowSave && protypeIndex==(index+'-'+index1)">
                              <el-button type="primary" size="mini" @click="editProtype(item,itemValue)">保存</el-button>
                              <el-button type="info" size="mini" @click="backEdit">取消</el-button>
                            </template>
                            <template v-else>
                              <i @click="delProtype(index,item,itemValue)" title="删除" class="el-icon-remove pointer"></i>
                              <i @click="openSave(index,index1,itemValue)" title="编辑" class="el-icon-edit-outline pointer"></i>
                            </template>

                          </template>
                        </p>
                      </div>
                      <div class="box_outer" v-else>
                        <p v-for="(itemValue,index1) in item.propertyValues">
                          <span v-if="!itemValue.readOnly">
                            <el-input v-model="itemValue.value" size="mini" :disabled="protypeIndex!=(index+'-'+index1)"></el-input>
                          </span>
                          <span v-else>{{itemValue.value}}</span>
                          <template v-if="!itemValue.readOnly">
                            <template v-if="isShowSave && protypeIndex==(index+'-'+index1)">
                              <el-button type="primary" size="mini" @click="editProtype(item,itemValue)">保存</el-button>
                              <el-button type="info" size="mini" @click="backEdit">取消</el-button>
                            </template>
                            <template v-else>
                              <i @click="delProtype(index,item,itemValue)" title="删除" class="el-icon-remove pointer"></i>
                              <i @click="openSave(index,index1,itemValue)" title="编辑" class="el-icon-edit-outline pointer"></i>
                            </template>
                          </template>
                        </p>
                      </div>
                    </td>
                  </tr>
                </table>
              </div>

              <div style="padding-left: 15px;padding-right:5px;background-color: #FFF">
                <el-collapse>
                  <el-collapse-item title="相关实体" name="socialdynamic" v-if="socialaccount.length != 0">
                    <div v-for="item in socialaccount" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.description}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>
                  <el-collapse-item title="相关事件" name="dynamicCondition" v-if="dynamicCondition.length != 0">
                    <div v-for="item in dynamicCondition" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>

                  <!-- <el-collapse-item title="相关人物" name="keyfigures" v-if="keyfigures.length != 0">
                    <div v-for="item in keyfigures" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>

                  <el-collapse-item title="相关组织" name="focusgroup" v-if="focusgroup.length != 0">
                    <div v-for="item in focusgroup" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item> -->
                  <!-- 文档 -->
                  <el-collapse-item title="相关文档" name="document" v-if="document.length != 0">
                    <div v-for="item in document" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>
                  <!-- 多媒体 -->
                  <el-collapse-item title="相关多媒体" name="media" v-if="media.length != 0">
                    <div v-for="item in media" :key="item.linkId" class="layout-dynamic" style="overflow: hidden;text-overflow:ellipsis;white-space: nowrap;margin-bottom: 10px;cursor: pointer">
                      <div>
                        <img width="25" :src="item.iconUrl" alt="" style="position: relative;top: 0px;">
                      </div>
                      <div style="padding-left: 10px;padding-right: 10px" @click="viewObjectInfo(item.objectType,item.rowkey,item.objectUri,item.name,item.displayName,item.iconUrl,item.showName,'false',item.belongGroup)">
                        <span style="font-size: 13px;color: #409eff;">{{item.showName ? item.showName : item.displayName}}</span> -
                        <span style="font-size: 13px">{{item.name}}</span>
                        <p style="width: 100%;line-height: 1.5;white-space:normal">
                          {{item.postContent}}
                        </p>
                      </div>
                    </div>
                  </el-collapse-item>
                </el-collapse>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div id="menu" :class="!menuShow?'nodata':''">
      <li @click="selectDraw('marker')">创建点</li>
      <li @click="selectDraw('polyline')">折线选择</li>
      <li @click="selectDraw('rectangle')">矩形选择</li>
      <li @click="selectDraw('circle')">圆形选择</li>
      <li @click="selectDraw('polygon')">多边形选择</li>
      <li @click="selectClear('polygon')">清除地图</li>
      <li @click="selectSave('polygon')">保存快照</li>
    </div>
    <!--新增属性对话框-->
    <el-dialog :visible.sync="propertyAddVisible" title="新增属性" :append-to-body='true' style="width:80%">
      <property-editor @closeDialog="closeAddPropertyDialog" :objectUri="nodesParmas.objecturi">
      </property-editor>
    </el-dialog>
  </div>
</template>
<script>
import 'animate.css'
import {
  getAssociationAttr,
  getRelationInfo,
  getGisList,
  getMapSnapshot,
  getGisPrototype
} from '@/api/map'
import { getsubscribeTree, getInstance } from '@/api/workBench'
import { deleteProperty } from '@/api/archives'
import tooTip from './tootip.vue'
import timeLine from './timeline.vue'
import mapUtil from '@/utils/mapUtil'
import util from '@/utils'
import eventPointImg from '@/images/event-point.png'
import eventPointCheckImg from '@/images/event-point-checked.png'
// 属性添加组件
const PropertyEditor = () =>
  import('@/views/archives/analysis/components/propertyEditor.vue')
import {
  propertySave, // 新增属性
  propertyUpdate, // 编辑属性,
  filterListRelation, // 右击关联数据
  findOperateProperties, // 根据对象Uri获得该该对象下所有可操作的属性
  getdetail, // 实例详细信息
  gettree,
  listFullText // 获取列表数组
} from '@/api/relationFraph'
export default {
  data() {
    return {
      // 属性选择框添加框
      propertyAddVisible: false,
      //  左侧bar数据
      selectBarData: [
        { icon: 'fa fa-search', text: '搜索' },
        { icon: 'fa fa-list', text: '分组' }
      ],
      // 对象类型List
      dxTypeList: ['实体', '事件', '重点人物', '重点组织'],
      // 属性类型List
      sxTypeList: [],
      // 实体属性类型
      objectTypeCount: '',
      keywords: '',
      // 搜索条件
      searchParams: {
        curpage: 1,
        keywords: [],
        objectList: [],
        objectType: 'socialaccount',
        persize: 20,
        tags: []
      },
      // 搜索结果列表是否显示
      keywordVisible: false,
      // 查询结果
      entryList: [],
      //  当前bar选择项
      activeBar: -1,
      // 详细信息是否显示
      infoVisiable: '',
      nodesParmas: {
        showName: '',
        name: '',
        image: '',
        objecturi: '',
        rowkey: ''
      }, // 点击节点对象信息
      showSelect: false, // 显示表单
      addAttribute: {}, // 添加属性
      addAttributeSave: {}, // 添加属性保存
      findOperateList: [],
      findOperateListModel: [],
      findOperateListModelAll: [],
      propertyList: [], // 详情获取属性值
      focusgroup: [], // 组织
      keyfigures: [], // 人物
      socialaccount: [], // 账号
      dynamicCondition: [], // 动态
      document: [], //文档
      media: [], //多媒体
      map: '',
      // 详细信息
      detailesData: {},
      // 当前地图选择节点
      current_checked_marker: '',
      // 当前页面对象
      allMark: [],
      loadTreeList: [], // 获取分组Id
      activeNum: null,
      // 分组信息
      FZ: {
        FZpage_size: 20,
        FZpage: 1
      },
      // 分组查询数据
      groupList: [],
      // 选中分组名称
      groupDisplayName: '',
      // 搜索结果列表选中的结果
      chooseResultList: [],
      // 搜索加载
      searchLoading: false,
      // 分组加载
      FZLoading: false,
      // 地图快照数据
      getSnapshotList: [],
      // 快照名称
      historyName: '',
      // 当前拖动对象所有的位置属性
      currentPlace: [],
      // 是否显示保存
      isShowSave: false,
      protypeIndex: 0,
      menuShow: false,
      // 修改前的值
      currentEditBefore: {},
      // 修改后的值
      currentEditAfter: {},
      // 当前快照选中点的值
      current_obj: {}
    }
  },
  components: {
    tooTip,
    timeLine,
    PropertyEditor
  },
  watch: {
    entryList(val) {
      if (val.length > 0) {
        // 监听result 的scroll
        this.$nextTick(() => {
          let el = document.getElementById('result')
          if (el) {
            el.addEventListener('scroll', this.handleScroll)
          }
        })
      }
    },
    groupList(val) {
      if (val.length > 0) {
        // 监听result 的scroll
        this.$nextTick(() => {
          let el = document.getElementById('FZresult')
          if (el) {
            el.addEventListener('scroll', this.handleScrollFZ)
          }
        })
      }
    }
  },
  created() {
    this.mapReloadData = mapUtil.tool.getMarkersInMap()
    this.loadTree()
    // 监听result 的scroll
    this.$nextTick(() => {
      let el = document.getElementById('FZresult')
      if (el) {
        el.addEventListener('scroll', this.handleScrollFZ)
      }
    })
  },
  mounted() {
    this.$nextTick(() => {
      let _this = this
      // 初始化地图
      this.map = mapUtil.initMap(116.403694, 39.927552)
      this.map.enableScrollWheelZoom(true)
      // this.map.setMapStatus(MapStatusUpdateFactory.newMapStatus(newMapStatus.Builder().zoom(3).build()));
      // todo
      mapUtil.tool.createMarker(new BMap.Point(0, 0))
      // 创建右键菜单
      this.map.addEventListener('rightclick', function(e) {
        if (window.event) {
          e = window.event
          e.stopPropagation()
        }
        _this.menuShow = true
        if (_this.menuShow) {
          var mymenu = document.getElementById('menu')
          mymenu.style.left = e.clientX + 5 + 'px'
          mymenu.style.top = e.clientY - 30 + 'px'
        }
      })

      // 添加地图类型控件
      this.drawingManagerPolygon = mapUtil.tool.createDrawingManager(
        this.map,
        BMAP_DRAWING_POLYGON
      )
    })
  },
  methods: {
    // 右击菜单恢复默认
    initState() {
      this.menuShow = false
      this.$refs.tooTip.MarkmenuShow = false
    },
    // 右击方法
    selectDraw(value) {
      this.$refs.tooTip.draw(value)
      this.menuShow = false
    },
    selectSave() {
      this.$refs.tooTip.showPhoto()
      this.menuShow = false
    },
    selectClear() {
      this.$refs.tooTip.clearOverlays()
      this.menuShow = false

      // 更新当前时间轴信息
      this.$refs.timeLine.getAllDetail([])
    },
    // 获取分组
    async loadTree(type, treeId) {
      let result = await getsubscribeTree({ top: 'false' })
      this.loadTreeList = result.data
      if (sessionStorage.getItem('MapgroupId')) {
        this.activeBar = -1
        for (let i = 0; i < this.loadTreeList.length; i++) {
          let item = this.loadTreeList[i]
          if (item.id == sessionStorage.getItem('MapgroupId')) {
            this.handleChooseGroupId(
              i,
              this.loadTreeList[i].id,
              this.loadTreeList[i].displayname
            )
            this.activeNum = i
          }
        }
      } else {
        this.handleChooseGroupId(
          0,
          this.loadTreeList[0].id,
          this.loadTreeList[0].displayname
        )
      }
    },
    // 打开保存按钮
    openSave(index, index1, value) {
      console.log(sessionStorage.getItem('current_obj'))
      this.isShowSave = true
      this.protypeIndex = index + '-' + index1
      //当前修改前的值
      this.currentEditBefore.longitude = value.value.longitude
      this.currentEditBefore.latitude = value.value.latitude
    },
    // 删除属性
    delProtype(index, item, itemvalue) {
      let propertyeObj = {
        rowkey: this.nodesParmas.rowkey,
        objectUri: this.nodesParmas.objecturi,
        propertyList: []
      }
      if (item.propertyType == 'TimeInterval') {
        propertyeObj.propertyList.push({
          propertyUri: item.propertyUri,
          timeEnd: new Date(itemvalue.timeEnd).getTime(),
          timeStart: new Date(itemvalue.timeStart).getTime(),
          propertyType: item.propertyType
        })
      } else if (item.propertyType == 'DateTime') {
        propertyeObj.propertyList.push({
          propertyUri: item.propertyUri,
          value: new Date(itemvalue.value).getTime(),
          propertyType: item.propertyType
        })
      } else if (item.propertyType == 'GisData') {
        propertyeObj.propertyList.push({
          propertyUri: item.propertyUri,
          address: itemvalue.value.address,
          longitude: itemvalue.value.address,
          latitude: itemvalue.value.address,
          propertyType: item.propertyType
        })
      } else {
        propertyeObj.propertyList.push({
          propertyUri: item.propertyUri,
          value: itemvalue.value,
          propertyType: item.propertyType
        })
      }

      this.$confirm('确定删除?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteProperty(propertyeObj).then(async data => {
            this.$message({ message: '删除成功!', type: 'success' })
            this.propertyList.splice(index, 1)

            console.log(this.allMark)
            for (let [index, items] of this.allMark.entries()) {
              if (items.rowkey === this.nodesParmas.rowkey) {
                this.allMark[index].propertyList = this.propertyList
                this.allMark[index].isEdit = true
                // 当修改属性时间时 时间轴作出相应更新
                if (
                  item.propertyType == 'TimeInterval' ||
                  item.propertyType == 'DateTime'
                ) {
                  this.$refs.timeLine.getKZAllDetail(this.allMark)
                } else if (item.propertyType == 'GisData') {
                  // 重新打点 只换位置
                  let allOverlay = this.map.getOverlays()
                  // todo
                  for (let list of allOverlay) {
                    if (list.customData.rowkey == this.nodesParmas.rowkey) {
                      // this.$refs.tooTip.CurrentDelmarker.marker = list
                      console.log(this.currentEditBefore)
                      this.$refs.tooTip.removeMarkerBySX(
                        this.currentEditBefore,
                        list
                      )
                      return
                    }
                  }
                }
              }
            }
          })
        })
        .catch(() => {
          this.$message({ type: 'info', message: '已取消删除' })
        })
    },
    // 取消编辑
    backEdit(e) {
      this.isShowSave = false
      this.protypeIndex = 0
      console.log(sessionStorage.getItem('current_obj'))
      // 获取对象详情
      if (sessionStorage.getItem('current_obj')) {
        this.propertyList = JSON.parse(sessionStorage.getItem('current_obj'))
        sessionStorage.removeItem('current_obj')
      } else {
        this.getNodeDetails(this.nodesParmas.rowkey, this.nodesParmas.objecturi)
      }
    },
    // 编辑属性
    editProtype(item, itemvalue) {
      this.currentEditAfter = itemvalue.value
      let propertyeObj = {
        objectUri: this.nodesParmas.objecturi,
        rowkey: this.nodesParmas.rowkey,
        propertyList: []
      }
      if (item.propertyType == 'TimeInterval') {
        propertyeObj.propertyList.push({
          propertyUri: item.propertyUri,
          timeEnd: new Date(itemvalue.timeEnd).getTime(),
          timeStart: new Date(itemvalue.timeStart).getTime(),
          propertyType: item.propertyType
        })
      } else if (item.propertyType == 'DateTime') {
        propertyeObj.propertyList.push({
          propertyUri: item.propertyUri,
          value: new Date(itemvalue.value).getTime(),
          propertyType: item.propertyType
        })
      } else if (item.propertyType == 'GisData') {
        propertyeObj.propertyList.push({
          propertyUri: item.propertyUri,
          address: itemvalue.value.address,
          longitude: itemvalue.value.longitude,
          latitude: itemvalue.value.latitude,
          propertyType: item.propertyType
        })
      } else {
        propertyeObj.propertyList.push({
          propertyUri: item.propertyUri,
          value: itemvalue.value,
          propertyType: item.propertyType
        })
      }
      setTimeout(() => {
        propertyUpdate(propertyeObj).then(async res => {
          if (res.status == 200) {
            this.$message.success('修改成功')
            this.protypeIndex = 0
            this.getNodeDetails(
              this.nodesParmas.rowkey,
              this.nodesParmas.objecturi
            )
            // 判断编辑属性的点是否在地图上 如果在当创建的时候需要在重新加载位置和时间
            for (let [index, items] of this.allMark.entries()) {
              if (items.rowkey === this.nodesParmas.rowkey) {
                this.allMark[
                  index
                ].propertyList = await this.$refs.tooTip.getallDetails({
                  rowkey: items.rowkey,
                  objectUri: items.objectUri
                })
                this.allMark[index].isEdit = true
                console.log(this.allMark[index])
                // 当修改属性时 时间轴作出相应更新
                this.$refs.timeLine.getKZAllDetail(this.allMark)
                // 当修改属性是时间区间或者时间点的时候 时间轴作出相应更新
                if (
                  item.propertyType == 'TimeInterval' ||
                  item.propertyType == 'DateTime'
                ) {
                  // let newMarker = []
                  // let allOverlay = this.map.getOverlays()
                  // for(let list of allOverlay){
                  //   newMarker.push(list.customData)
                  // }
                  console.log(this.allMark)
                  // this.$refs.timeLine.getKZAllDetail(this.allMark)
                } else if (item.propertyType == 'GisData') {
                  // 重新打点 只换位置
                  let allOverlay = this.map.getOverlays()
                  // todo
                  for (let list of allOverlay) {
                    if (list.customData.rowkey == this.nodesParmas.rowkey) {
                      // this.$refs.tooTip.CurrentDelmarker.marker = list
                      console.log(this.currentEditBefore)
                      this.$refs.tooTip.removeMarkerBySX(
                        this.currentEditBefore,
                        list
                      )
                      let Cdisplayname = this.nodesParmas.showName
                        ? this.nodesParmas.showName
                        : this.nodesParmas.displayName
                      console.log(this.allMark)
                      console.log(this.nodesParmas)
                      console.log(this.propertyList)
                      this.$refs.tooTip.addMarker(
                        itemvalue.value.longitude,
                        itemvalue.value.latitude,
                        this.nodesParmas.rowkey,
                        this.nodesParmas.objecturi,
                        this.nodesParmas.objectType,
                        Cdisplayname,
                        this.nodesParmas.name,
                        this.nodesParmas.image,
                        this.nodesParmas.belongGroup,
                        this.propertyList
                      )
                      this.$refs.timeLine.getKZAllDetail(this.allMark)
                      return
                    }
                  }
                }
              }
            }
          }
        })
      }, 0)
    },
    // 分组查询
    handleGroupList() {
      this.FZLoading = true
      let params = {
        groupId: sessionStorage.getItem('MapgroupId'),
        keyword: '',
        curpage: this.FZ.FZpage,
        pagesize: this.FZ.FZpage_size
      }
      getInstance(params)
        .then(res => {
          if (res.status == 200) {
            this.groupList = res.data
            this.FZLoading = false
            for (let i = 0; i < this.groupList.length; i++) {
              this.groupList[i].active = false
            }
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(error => {
          this.$message.error(error)
        })
    },
    // 左侧菜单样式
    async handleChooseGroupId(_index, _id, _name) {
      // let vm = this;
      this.activeNum = _index
      sessionStorage.setItem('MapgroupId', _id)
      sessionStorage.setItem('mapgroupDisplayName', _name)
      this.groupDisplayName = sessionStorage.getItem('mapgroupDisplayName')
      this.FZ.FZpage = 1
      this.allMark = []
      await this.handleGroupList()
      // 获取快照
      this.handleGetSnapshot()
      // this.$refs.timeLine.KZactiveIndex = 0
    },
    // 获取快照
    async handleGetSnapshot(index) {
      let vm = this
      vm.getSnapshotList = []
      let snapshotObj = {
        caseId: sessionStorage.getItem('MapgroupId')
          ? sessionStorage.getItem('MapgroupId')
          : 1,
        id: ''
      }
      getMapSnapshot(snapshotObj)
        .then(res => {
          if (res.status == 200) {
            vm.getSnapshotList = res.data
            this.$refs.tooTip.clearOverlays()
            if (
              vm.getSnapshotList &&
              vm.getSnapshotList.length > 0 &&
              vm.getSnapshotList[0].graphData
            ) {
              if (!index) {
                this.$refs.timeLine.selectKZ(0)
              }
              let result = index
                ? JSON.parse(vm.getSnapshotList[index].graphData)
                : JSON.parse(vm.getSnapshotList[0].graphData)
              console.log(result)
              for (let self of result) {
                let Cdisplayname = self.showName
                  ? self.showName
                  : self.displayName
                this.$refs.tooTip.addMarker(
                  self.longitude,
                  self.latitude,
                  self.rowkey,
                  self.objectUri,
                  self.objectType,
                  Cdisplayname,
                  self.name,
                  self.iconUrl,
                  self.belongGroup,
                  self.propertyList
                )
              }
            }
            if (vm.getSnapshotList.length == 0) {
              this.historyName = ''
            } else {
              if (index) {
                this.historyName = this.getSnapshotList[index].description
              } else {
                this.historyName = this.getSnapshotList[0].description
              }
            }
            setTimeout(() => {
              this.$refs.timeLine.getSJZ()
            }, 0)
          } else {
            this.$message.error(res.msg)
          }
        })
        .catch(error => {
          this.$message.error(error)
        })
    },
    // 跳转页面
    viewObjectInfo(
      objectType,
      instanceUri,
      objectUri,
      name,
      displayName,
      icon,
      showName,
      isImportant,
      _belongGroup
    ) {
      let currentUrl = window.location.href
      currentUrl = currentUrl.split('#')[0]
      let nameShow = showName || displayName
      currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${nameShow}&icon=${icon}&name=${name}&belongGroup=${_belongGroup}`
      window.open(currentUrl, '')
      // if (objectType == 'com.scistor.object.entity') {
      //     currentUrl = `${currentUrl}#/display?isImportant=${isImportant}&objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${nameShow}&icon=${icon}&name=${name}&belongGroup=${_belongGroup}`
      //     window.open(currentUrl, '')
      // } else {
      //     currentUrl = `${currentUrl}#/obj-show?objectType=${objectType}&instanceUri=${instanceUri}&objectUri=${objectUri}&displayName=${nameShow}&icon=${icon}&name=${name}&belongGroup=${_belongGroup}`
      //     window.open(currentUrl, '')
      // }
    },
    // 恢复默认状态
    clearInit() {
      this.activeBar = -1
      if (!this.infoVisiable) {
        return
      }
      this.infoVisiable = 'fadeOutRight'
    },
    // 设置地图类型
    setMapType(type) {
      if (type === 'normal') {
        this.map.setMapType(BMAP_NORMAL_MAP)
      } else {
        this.map.setMapType(BMAP_SATELLITE_MAP)
      }
    },
    // 获取所拖动点的位置属性
    getPrototype(params) {
      this.currentPlace = []
      return new Promise((resolve, reject) => {
        getGisPrototype(params).then(
          res => {
            for (let item of res.data) {
              for (let list of item.propertyValues) {
                this.currentPlace.push({
                  lng: list.value.longitude,
                  lat: list.value.latitude
                })
              }
            }
            resolve(this.currentPlace)
          },
          error => {
            reject(error)
          }
        )
      })
    },
    // 开始移动
    dragstart(event, data) {
      // event.dataTransfer.setData('item', JSON.stringify(data))
      // this.getNodeDetails(data.rowkey, data.objectUri)
    },
    // 搜索接触拖拽到画布
    async dragend(event, index, obj) {
      console.log(this.chooseResultList)
      console.log(obj)
      if (this.chooseResultList && this.chooseResultList.length > 0) {
        this.chooseResultList.forEach(async (item, index) => {
          let result = []
          // 获取所拖对象的地址属性
          let params = {
            rowkey: item.rowkey,
            objectUri: item.objectUri
          }
          result = await this.getPrototype(params)
          let Cdisplayname = item.showName ? item.showName : item.displayName
          if (result.length <= 0) {
            this.$message.error('该对象无经纬度无法添加到地图')
          } else {
            for (let self of result) {
              this.$refs.tooTip.addMarker(
                self.lng,
                self.lat,
                item.rowkey,
                item.objectUri,
                item.objectType,
                Cdisplayname,
                item.name,
                item.iconUrl,
                item.belongGroup
              )
            }
          }
        })
      } else {
        // 判断当前拖动的点是否已经存在在地图上 先删除已存在的点
        let CallOverlay = this.map.getOverlays()
        for (let item of CallOverlay) {
          if (item.customData) {
            if (item.customData.rowkey == obj.rowkey) {
              this.map.removeOverlay(item)
              if (this.allMark && this.allMark.length > 0) {
                for (let [index, self] of this.allMark.entries()) {
                  if (self.rowkey == obj.rowkey) {
                    this.allMark.splice(index, 1)
                  }
                }
              }
            }
          }
        }
        // 获取所拖对象的地址属性
        let params = {
          rowkey: obj.rowkey,
          objectUri: obj.objectUri
        }
        let Cdisplayname = obj.showName ? obj.showName : obj.displayName
        let result = await this.getPrototype(params)
        console.log(result)
        if (result.length <= 0) {
          this.$message.error('该对象无经纬度无法添加到地图')
        } else {
          for (let self of result) {
            console.log('yige')
            let propertyList = await this.$refs.tooTip.getallDetails({
              rowkey: obj.rowkey,
              objectUri: obj.objectUri
            })
            this.$refs.tooTip.addMarker(
              self.lng,
              self.lat,
              obj.rowkey,
              obj.objectUri,
              obj.objectType,
              Cdisplayname,
              obj.name,
              obj.iconUrl,
              obj.belongGroup,
              propertyList
            )
          }
        }
      }
      console.log('erge')
      // 放置完成清除所选对象
      this.chooseResultList = []
      // 更新对象
      // 获取所拖入对象属性
      let proResult = await this.$refs.tooTip.getallDetails({
        rowkey: obj.rowkey,
        objectUri: obj.objectUri
      })
      for (let [index, item] of this.allMark.entries()) {
        if (this.allMark[index].propertyList) {
          this.allMark[index].propertyList = this.allMark[index].propertyList
        } else {
          this.allMark[
            index
          ].propertyList = await this.$refs.tooTip.getallDetails({
            rowkey: obj.rowkey,
            objectUri: obj.objectUri
          })
        }
      }
      this.$refs.timeLine.getSJZ()
    },
    // 搜索接触拖拽到画布
    allowDrop(event) {
      event.preventDefault()
    },

    // 画布结束拖拽数据
    drop(event) {
      // let vm = this;
      // let allData = vm.cy.json();
      // let data = event.dataTransfer.getData('item')
      // this.dropData = JSON.parse(data)
    },
    // 监听滚动事件
    handleScroll() {
      this.$nextTick(() => {
        const result = document.getElementById('result')
        const offsetHeight = result.offsetHeight
        const scrollTop = result.scrollTop
        const scrollHeight = result.scrollHeight
        if (offsetHeight + scrollTop - scrollHeight >= -1) {
          // 需要执行的代码
          this.searchParams.curpage = this.searchParams.curpage + 1
          listFullText(this.searchParams).then(res => {
            if (res.status == 200) {
              let entryList = res.data
              this.entryList = this.entryList.concat(entryList)
              for (let i = 0; i < this.entryList.length; i++) {
                this.entryList[i].active = false
              }
            }
          })
        }
      })
    },
    // 监听滚动事件
    handleScrollFZ() {
      console.log(1234)
      this.$nextTick(() => {
        let result = document.querySelector('#FZresult')
        if (result) {
          console.log(result)
          let offsetHeight = result.offsetHeight
          const scrollTop = result.scrollTop
          const scrollHeight = result.scrollHeight
          if (offsetHeight + scrollTop - scrollHeight >= -1) {
            // 需要执行的代码
            this.FZ.FZpage = this.FZ.FZpage + 1
            // this.FZLoading = true
            let params = {
              groupId: sessionStorage.getItem('MapgroupId'),
              keyword: '',
              curpage: this.FZ.FZpage,
              pagesize: this.FZ.FZpage_size
            }
            getInstance(params)
              .then(res => {
                if (res.status == 200) {
                  if (res.data.length > 0) {
                    this.groupList.push(res.data)
                    for (let i = 0; i < this.groupList.length; i++) {
                      this.groupList[i].active = false
                    }
                  }
                } else {
                  this.$message.error(res.msg)
                }
              })
              .catch(error => {
                this.$message.error(error)
              })
          }
        }
      })
    },
    // 查询后点击效果
    handleChooseSearch(e, _index) {
      for (let i = 0; i < this.entryList.length; i++) {
        this.entryList[i].active = false
      }
      if (this.firstIndex) {
        this.secondIndex = _index
      } else {
        this.firstIndex = _index
        this.entryList[_index].active = true
      }
      this.chooseResultList = []
      if (
        (this.firstIndex && this.secondIndex) ||
        (this.firstIndex == 0 && this.secondIndex) ||
        (this.firstIndex == 0 && this.secondIndex == 0) ||
        (this.firstIndex && this.secondIndex == 0)
      ) {
        if (this.firstIndex > this.secondIndex) {
          // chooseResultList
          for (let n = 0; n < this.entryList.length; n++) {
            if (n >= this.secondIndex && n <= this.firstIndex) {
              this.chooseResultList.push(this.entryList[n])
              this.entryList[n].active = true
            }
          }
        } else if (this.firstIndex < this.secondIndex) {
          for (let m = 0; m < this.entryList.length; m++) {
            if (m >= this.firstIndex && m <= this.secondIndex) {
              this.chooseResultList.push(this.entryList[m])
              this.entryList[m].active = true
            }
          }
        } else if (this.firstIndex == this.secondIndex) {
          for (let l = 0; l < this.entryList.length; l++) {
            if (l == this.firstIndex) {
              this.chooseResultList.push(this.entryList[l])
              this.entryList[l].active = true
            }
          }
        }
      }
      this.entryList = Object.assign([], this.entryList)
    },
    handleChooseSearchCtrl(e, _index) {
      if (this.chooseResultList.length != 0) {
        for (let i = 0; i < this.chooseResultList.length; i++) {
          let item = this.chooseResultList[i]
          if (item.rowkey == this.entryList[_index].rowkey) {
            this.entryList[_index].active = !this.entryList[_index].active
            this.chooseResultList.splice(i, 1)
            this.entryList = Object.assign([], this.entryList)
            return
          }
        }
      }
      this.entryList[_index].active = true
      this.chooseResultList.push(this.entryList[_index])
      this.entryList = Object.assign([], this.entryList)
    },
    // 展示快照内对象
    showInfoKZ(e, _index, _obj) {
      console.log('showInfoKZ')
      sessionStorage.setItem('current_obj', JSON.stringify(_obj.propertyList))
      console.log(this.current_obj)
      for (let [index, self] of this.allMark.entries()) {
        if (self.rowkey == _obj.rowkey) {
          if (self.isEdit) {
            this.showInfo(e, _index, _obj)
            return true
          }
        }
      }
      console.log('1234')
      e.stopPropagation()
      let vm = this
      vm.protypeIndex = 0
      vm.showSelect = false
      // 显示详细信息
      this.infoVisiable = 'fadeInRight'
      this.nodesParmas.rowkey = _obj.rowkey
      this.nodesParmas.objecturi = _obj.objectUri
      this.nodesParmas.showName = _obj.showName
        ? _obj.showName
        : _obj.displayName
      this.nodesParmas.name = _obj.name
      this.nodesParmas.image = _obj.iconUrl
      this.nodesParmas.belongGroup = _obj.belongGroup
      this.nodesParmas.objectType = _obj.objectType
      this.propertyList = _obj.propertyList
      // 相关动态人物组织账号获取
      vm.handleDynamicCondition('socialdynamic')
      vm.handleFocusgroup('focusgroup')
      vm.handleKeyfigures('keyfigures')
      vm.handleAccountNumber('socialaccount')
      // 获取文档
      vm.handleDocument('document')
      // 获取多媒体
      vm.handleMedia('media')
    },
    // 展示对象
    showInfo(e, _index, _obj) {
      e.stopPropagation()
      let vm = this
      console.log('showInfo')
      vm.protypeIndex = 0
      vm.showSelect = false
      // 显示详细信息
      this.infoVisiable = 'fadeInRight'
      this.nodesParmas.rowkey = _obj.rowkey
      this.nodesParmas.objecturi = _obj.objectUri
      this.nodesParmas.showName = _obj.showName
        ? _obj.showName
        : _obj.displayName
      this.nodesParmas.name = _obj.name
      this.nodesParmas.image = _obj.iconUrl
      this.nodesParmas.belongGroup = _obj.belongGroup
      this.nodesParmas.objectType = _obj.objectType
      // 获取对象详情
      vm.getNodeDetails(_obj.rowkey, _obj.objectUri)
      // 相关动态人物组织账号获取
      vm.handleDynamicCondition('socialdynamic')
      vm.handleFocusgroup('focusgroup')
      vm.handleKeyfigures('keyfigures')
      vm.handleAccountNumber('socialaccount')
      // 获取文档
      vm.handleDocument('document')
      // 获取多媒体
      vm.handleMedia('media')
    },
    // 选择对象
    handleChooseSearchClick(e, _index, _obj) {
      e.stopPropagation()
      let vm = this
      vm.protypeIndex = 0
      vm.showSelect = false
      // 显示详细信息
      this.infoVisiable = 'fadeInRight'
      this.nodesParmas.rowkey = _obj.rowkey
      this.nodesParmas.objecturi = _obj.objectUri
      this.nodesParmas.showName = _obj.showName
        ? _obj.showName
        : _obj.displayName
      this.nodesParmas.name = _obj.name
      this.nodesParmas.image = _obj.iconUrl
      this.nodesParmas.belongGroup = _obj.belongGroup
      this.nodesParmas.objectType = _obj.objectType
      // 获取对象详情
      vm.getNodeDetails(_obj.rowkey, _obj.objectUri)
      // 相关动态人物组织账号获取
      vm.handleDynamicCondition('socialdynamic')
      vm.handleFocusgroup('focusgroup')
      vm.handleKeyfigures('keyfigures')
      vm.handleAccountNumber('socialaccount')
      // 获取文档
      vm.handleDocument('document')
      // 获取多媒体
      vm.handleMedia('media')
      // if (!e.shiftKey && !e.ctrlKey) {
      //     this.chooseResultList = []
      //     for (let i = 0; i < this.entryList.length; i++) {
      //         this.entryList[i].active = false
      //     }
      //     // this.entryList[_index].active = !this.entryList[_index].active;
      //     this.chooseResultList.push(this.entryList[_index])
      //     this.firstIndex = _index,
      //     this.entryList = Object.assign([], this.entryList)
      // }
    },
    // 获取详情
    getNodeDetails(_rowkey, _objectUri) {
      let vm = this
      let getdetailObj = {
        rowkey: _rowkey,
        objectUri: _objectUri
      }
      getdetail(getdetailObj).then(res => {
        if (res.status == 200) {
          this.detailesData = res.data
          let detailesData = res.data
          this.propertyList = detailesData.propertyList
        }
      })
    },
    // 属性新增或编辑
    handleCreateAttr() {
      // propertySave propertyUpdate
      let vm = this
      let propertyeObj = {
        objectUri: this.nodesParmas.objecturi,
        rowkey: this.nodesParmas.rowkey,
        propertyList: []
      }
      this.addAttributeSave.propertyUri = this.addAttribute.propertyUri
      this.addAttributeSave.propertyType = this.addAttribute.propertyType
      if (this.addAttribute.propertyType == 'TimeInterval') {
        this.addAttributeSave.timeStart = new Date(
          this.addAttributeSave.timeStart
        ).getTime()
        this.addAttributeSave.timeEnd = new Date(
          this.addAttributeSave.timeEnd
        ).getTime()
      }
      if (this.addAttribute.propertyType == 'DateTime') {
        this.addAttributeSave.value = new Date(
          this.addAttributeSave.value
        ).getTime()
      }
      propertyeObj.propertyList.push(this.addAttributeSave)
      // 属性保存
      propertySave(propertyeObj).then(async res => {
        if (res.status == 200) {
          vm.getNodeDetails(this.nodesParmas.rowkey, this.nodesParmas.objecturi)
          for (let [index, items] of this.allMark.entries()) {
            if (items.rowkey === this.nodesParmas.rowkey) {
              // 跟新当前点的信息
              this.allMark[
                index
              ].propertyList = await this.$refs.tooTip.getallDetails({
                rowkey: items.rowkey,
                objectUri: items.objectUri
              })
              this.allMark[index].isEdit = true
              this.$refs.timeLine.getKZAllDetail(this.allMark)
              // 当修改属性是时间区间或者时间点的时候 时间轴作出相应更新
              if (
                this.addAttributeSave.propertyType == 'TimeInterval' ||
                this.addAttributeSave.propertyType == 'DateTime'
              ) {
                // this.$refs.timeLine.getKZAllDetail(this.allMark)
              } else if (this.addAttributeSave.propertyType == 'GisData') {
                // 重新打点 只换位置
                let allOverlay = this.map.getOverlays()
                // todo
                for (let list of allOverlay) {
                  if (list.customData.rowkey == this.nodesParmas.rowkey) {
                    // this.$refs.tooTip.CurrentDelmarker.marker = list
                    console.log(this.currentEditBefore)
                    this.$refs.tooTip.removeMarkerBySX(
                      this.currentEditBefore,
                      list
                    )
                    let Cdisplayname = this.nodesParmas.showName
                      ? this.nodesParmas.showName
                      : this.nodesParmas.displayName
                    this.$refs.tooTip.addMarker(
                      this.nodesParmas.longitude,
                      this.nodesParmas.latitude,
                      this.nodesParmas.rowkey,
                      this.nodesParmas.objecturi,
                      this.nodesParmas.objectType,
                      Cdisplayname,
                      this.nodesParmas.name,
                      this.nodesParmas.image,
                      this.nodesParmas.belongGroup
                    )
                    return
                  }
                }
              }
            }
          }
          vm.showSelect = false
          vm.addAttributeSave = {}
          vm.addAttribute.propertyType = ''
          vm.addAttribute = {}
        }
      })
    },
    // 选择属性类型
    handleGroupCountFullText() {
      let obj = {
        uriList: '',
        typeList: [
          'socialaccount',
          'socialdynamic',
          'keyfigures',
          'focusgroup'
        ].join(',')
      }
      this.sxTypeList = []
      gettree(obj).then(res => {
        let treeData = res.data
        for (let i = 0; i < treeData.length; i++) {
          if (this.searchParams.objectType == treeData[i].parentkey) {
            this.sxTypeList.push(treeData[i])
          }
        }
      })
    },
    // 对象类型选择
    handleObjectType() {
      this.objectTypeCount = ''
      this.searchParams.objectList = []
      this.handleInquireSearch()
      this.handleGroupCountFullText()
    },
    handleObjectTypeCount() {
      this.entryList = []
      this.searchParams.curpage = 1
      // this.firstIndex = ''
      // this.secondIndex = ''
      this.searchParams.objectList = []
      this.searchParams.objectList = [this.objectTypeCount]
      this.handleInquireSearch()
    },
    // 搜索
    handleSearch() {
      if (!this.keywords) {
        this.keywordVisible = false
        return
      } else {
        this.keywordVisible = true
      }
      let hasKeyword = ''
      hasKeyword = this.searchParams.keywords.find(item => {
        return item == this.keywords
      })
      if (!hasKeyword) {
        this.searchParams.keywords.push(this.keywords)
      }
      this.searchParams.objectList = []
      this.entryList = []
      this.searchParams.curpage = 1
      this.firstIndex = ''
      this.secondIndex = ''
      this.handleInquireSearch()
      this.handleGroupCountFullText()
    },
    // 全文检索
    handleInquireSearch() {
      this.searchLoading = true
      listFullText(this.searchParams).then(res => {
        if (res.status == 200) {
          let entryList = res.data
          this.entryList = []
          this.entryList = this.entryList.concat(entryList)
          if (this.entryList.length <= 0) {
            this.$message.info('暂无数据哦')
            this.searchLoading = false
          } else {
            this.searchLoading = false
          }
          // this.firstIndex = ''
          // this.secondIndex = ''
          for (let i = 0; i < this.entryList.length; i++) {
            this.entryList[i].active = false
          }
        }
      })
    },
    // 删除搜索条件
    handleDeleteSearch(_index) {
      this.searchParams.keywords.splice(_index, 1)
      if (this.searchParams.keywords.length == 0) {
        this.keywords = '*'
        this.searchParams.keywords.push(this.keywords)
      }
      this.entryList = []
      this.searchParams.curpage = 1
      this.handleInquireSearch()
      this.handleGroupCountFullText()
    },
    // 人物
    handleKeyfigures(_type) {
      let vm = this
      this.keyfigures = [] // 人物
      vm.nodesVisible = false
      let data = {
        rowkey: this.nodesParmas.rowkey,
        objectType: _type,
        objectUri: this.nodesParmas.objecturi,
        filterObjectUris: null
      }
      filterListRelation(data).then(res => {
        if (res.status == 200) {
          let keyfigures = res.data
          keyfigures.forEach(item => {
            if (item.personIconUrl) {
              item.iconUrl = item.personIconUrl
            }
          })
          let hash = {}
          const newArr = keyfigures.reduceRight((item, next) => {
            hash[next.rowkey]
              ? ''
              : (hash[next.rowkey] = true && item.push(next))
            return item
          }, [])
          this.keyfigures = newArr
        }
      })
    },
    // 账号
    handleAccountNumber(_type) {
      let vm = this
      this.socialaccount = [] // 账号
      vm.nodesVisible = false
      let data = {
        rowkey: this.nodesParmas.rowkey,
        objectType: _type,
        objectUri: this.nodesParmas.objecturi,
        filterObjectUris: null
      }
      filterListRelation(data).then(res => {
        if (res.status == 200) {
          let socialaccount = res.data
          socialaccount.forEach(item => {
            if (item.personIconUrl) {
              item.iconUrl = item.personIconUrl
            }
          })
          let hash = {}
          const newArr = socialaccount.reduceRight((item, next) => {
            hash[next.rowkey]
              ? ''
              : (hash[next.rowkey] = true && item.push(next))
            return item
          }, [])
          this.socialaccount = newArr
        }
      })
    },
    // 动态
    handleDynamicCondition(_type) {
      let vm = this
      this.dynamicCondition = [] // 动态
      vm.nodesVisible = false
      let data = {
        rowkey: this.nodesParmas.rowkey,
        objectType: _type,
        objectUri: this.nodesParmas.objecturi,
        filterObjectUris: null
      }
      filterListRelation(data).then(res => {
        if (res.status == 200) {
          let dynamicCondition = res.data
          dynamicCondition.forEach(item => {
            if (item.personIconUrl) {
              item.iconUrl = item.personIconUrl
            }
          })
          let hash = {}
          const newArr = dynamicCondition.reduceRight((item, next) => {
            hash[next.rowkey]
              ? ''
              : (hash[next.rowkey] = true && item.push(next))
            return item
          }, [])
          this.dynamicCondition = newArr
        }
      })
    },
    // 组织
    handleFocusgroup(_type) {
      let vm = this
      this.focusgroup = [] // 组织
      vm.nodesVisible = false
      let data = {
        rowkey: this.nodesParmas.rowkey,
        objectType: _type,
        objectUri: this.nodesParmas.objecturi,
        filterObjectUris: null
      }
      filterListRelation(data).then(res => {
        if (res.status == 200) {
          let focusgroup = res.data
          focusgroup.forEach(item => {
            if (item.personIconUrl) {
              item.iconUrl = item.personIconUrl
            }
          })
          let hash = {}
          const newArr = focusgroup.reduceRight((item, next) => {
            hash[next.rowkey]
              ? ''
              : (hash[next.rowkey] = true && item.push(next))
            return item
          }, [])
          this.focusgroup = newArr
        }
      })
    },
    // 文档
    handleDocument(_type) {
      let vm = this
      this.document = [] //动态
      vm.nodesVisible = false
      let data = {
        rowkey: this.nodesParmas.rowkey,
        objectType: _type,
        objectUri: this.nodesParmas.objecturi,
        filterObjectUris: null
      }
      filterListRelation(data).then(res => {
        if (res.status == 200) {
          let document = res.data
          document.forEach(item => {
            if (item.personIconUrl) {
              item.iconUrl = item.personIconUrl
            }
          })
          let hash = {}
          const newArr = document.reduceRight((item, next) => {
            hash[next.rowkey]
              ? ''
              : (hash[next.rowkey] = true && item.push(next))
            return item
          }, [])
          this.document = newArr
        }
      })
    },
    // 多媒体
    handleMedia(_type) {
      let vm = this
      this.media = [] //动态
      vm.nodesVisible = false
      let data = {
        rowkey: this.nodesParmas.rowkey,
        objectType: _type,
        objectUri: this.nodesParmas.objecturi,
        filterObjectUris: null
      }
      filterListRelation(data).then(res => {
        if (res.status == 200) {
          let media = res.data
          media.forEach(item => {
            if (item.personIconUrl) {
              item.iconUrl = item.personIconUrl
            }
          })
          let hash = {}
          const newArr = media.reduceRight((item, next) => {
            hash[next.rowkey]
              ? ''
              : (hash[next.rowkey] = true && item.push(next))
            return item
          }, [])
          this.media = newArr
        }
      })
    },
    // 选择bar
    selectBar(index) {
      if (this.activeBar == index) {
        // 回归初始状态
        this.activeBar = -1
        return
      }
      this.activeBar = index
    },
    // 打开右侧详细信息
    openInfo() {},
    // 拖动时间轴显示标注
    showOverlays(data) {
      var allOverlay = this.map.getOverlays()
      for (let item of allOverlay) {
        if (item.customData) {
          if (data.includes(item.customData.rowkey)) {
            item.setIcon(
              new BMap.Icon(eventPointCheckImg, new BMap.Size(32, 36), {
                imageOffset: new BMap.Size(0, 0),
                imageSize: new BMap.Size(32, 36)
              })
            )
          } else {
            item.setIcon(
              new BMap.Icon(eventPointImg, new BMap.Size(23, 25), {
                imageOffset: new BMap.Size(0, 0),
                imageSize: new BMap.Size(23, 25)
              })
            )
          }
        }
      }
    },
    // 删除节点
    handleDeleteNode() {
      var allOverlay = this.map.getOverlays()
      for (let item of allOverlay) {
        if (item.customData) {
          if (item.customData.rowkey == this.current_checked_marker) {
            this.map.removeOverlay(item)
            if (this.allMark && this.allMark.length > 0) {
              for (let [index, self] of this.allMark.entries()) {
                if (self.rowkey == this.current_checked_marker) {
                  this.allMark.splice(index, 1)
                }
              }
            }
          }
        }
      }
    },
    // 根据对象Uri获得该该对象下所有可操作的属性
    getproperty(_uri) {
      this.showSelect = true
      this.addAttribute = {}
      findOperateProperties({ uri: _uri }).then(res => {
        let arrList = []
        this.findOperateList = res.data
        this.findOperateListModel = []
        this.findOperateListModelAll = []
        for (let i = 0; i < this.findOperateList.length; i++) {
          let current = this.findOperateList[i]
          if (current.representative == '1') {
            if (current.propertyType == 'GisData') {
              let obj = {
                propertyUri: current.propertyUri,
                propertyType: 'GisData',
                displayed: current.displayed != '0',
                address: '',
                latitude: '',
                longitude: '',
                displayname: current.displayname,
                representative: current.representative,
                label: current.representative == 1
              }
              this.findOperateListModel.push(obj)
            } else if (current.propertyType == 'TimeInterval') {
              let timeObj = {
                propertyUri: current.propertyUri,
                propertyType: 'TimeInterval',
                displayed: current.displayed != '0',
                timeStart: '',
                timeEnd: '',
                label: current.representative == 1,
                displayname: current.displayname,
                representative: current.representative
              }
              this.findOperateListModel.push(timeObj)
            } else if (current.propertyType == 'DateTime') {
              let timeDataObj = {
                propertyUri: current.propertyUri,
                propertyType: 'DateTime',
                displayed: current.displayed != '0',
                value: '',
                label: current.representative == 1,
                displayname: current.displayname,
                representative: current.representative
              }
              this.findOperateListModel.push(timeDataObj)
            } else {
              let stringObj = {
                propertyUri: current.propertyUri,
                propertyType: 'String',
                value: '',
                label: current.representative == 1,
                displayname: current.displayname,
                displayed: current.displayed != '0',
                representative: current.representative
              }
              this.findOperateListModel.push(stringObj)
            }
          } else {
            if (current.propertyType == 'GisData') {
              let obj = {
                propertyUri: current.propertyUri,
                propertyType: 'GisData',
                displayed: current.displayed != '0',
                address: '',
                latitude: '',
                longitude: '',
                displayname: current.displayname,
                representative: current.representative,
                label: current.representative == 1
              }
              this.findOperateListModelAll.push(obj)
            } else if (current.propertyType == 'TimeInterval') {
              let timeObj = {
                propertyUri: current.propertyUri,
                propertyType: 'TimeInterval',
                displayed: current.displayed != '0',
                timeStart: '',
                timeEnd: '',
                label: current.representative == 1,
                displayname: current.displayname,
                representative: current.representative
              }
              this.findOperateListModelAll.push(timeObj)
            } else if (current.propertyType == 'DateTime') {
              let timeDataObj = {
                propertyUri: current.propertyUri,
                propertyType: 'DateTime',
                displayed: current.displayed != '0',
                value: '',
                label: current.representative == 1,
                displayname: current.displayname,
                representative: current.representative
              }
              this.findOperateListModelAll.push(timeDataObj)
            } else {
              let stringObj = {
                propertyUri: current.propertyUri,
                propertyType: 'String',
                value: '',
                label: current.representative == 1,
                displayname: current.displayname,
                displayed: current.displayed != '0',
                representative: current.representative
              }
              this.findOperateListModelAll.push(stringObj)
            }
          }
        }
      })
    },
    // 查询选择属性类型
    handleChoosePropertyUri() {
      if (this.addAttribute === '1') {
        this.$message.error('该属性为代表属性，不允许操作!')
        this.handleCannel()
        this.addAttribute = ''
        return
      }
      for (let item of this.propertyList) {
        // todo
        for (let list of item.propertyValues) {
          if (
            item.propertyUri == this.addAttribute.propertyUri &&
            !list.readOnly
          ) {
            this.$message.error('您已标注过该属性,不可重复添加')
            this.handleCannel()
            return
          }
        }
      }
      this.addAttributeSave = {}
      for (let i = 0; i < this.findOperateListModelAll.length; i++) {
        let current = this.findOperateListModelAll[i]
        if (current.propertyUri == this.addAttribute.propertyUri) {
          this.addAttribute.propertyType = current.propertyType
          this.addAttribute.name = current.displayname
        }
      }

      for (let j = 0; j < this.propertyList.length; j++) {
        let propertyListCurrent = this.propertyList[j]
        if (this.addAttribute.propertyUri == propertyListCurrent.propertyUri) {
          this.propertyType = 'edit'
        }
      }
    },
    // 取消属性
    handleCannel() {
      let vm = this
      vm.showSelect = false
      vm.addAttributeSave = {}
      vm.addAttribute.propertyType = ''
      vm.addAttribute = {}
    },
    // 属性选择框添加属性
    addProperty() {
      this.propertyAddVisible = true
    },
    // 关闭新增属性对话框
    closeAddPropertyDialog() {
      this.propertyAddVisible = false
      this.getproperty(this.nodesParmas.objecturi)
      // this.ruleForm.current_attr_value = ''
    }
  }
}
</script>
<style scoped>
@import '../../assets/relation.css';
</style>
<style lang="less" scoped>
.property-value {
  display: flex;
  align-items: center;
  // justify-content: space-between;
  .box_outer {
    width: 100%;
    border-bottom: 1px solid#efe9e9;
    padding: 5px 0;
    button {
      width: 20%;
      padding: 5px 3px;
    }
  }
  p {
    display: flex;
    align-items: center;
    padding: 5px 0;
    span {
      padding-right: 10px;
      width: 60%;
      &.TimeIntervalSpan {
        display: flex;
        align-content: center;
        flex-wrap: wrap;
      }
    }
  }
}
.map-show {
  widows: 100%;
  height: 100%;
  position: relative;
  #menu {
    position: absolute;
    z-index: 100000;
    padding: 5px 0;
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2) !important;
    border-radius: 6px;
    background: #ffffff;
    &.nodata {
      display: none;
    }
    li {
      color: #333 !important;
      padding: 3px 20px !important;
      margin: 0 !important;
      font-weight: 400;
      line-height: 20px;
      white-space: nowrap;
      min-width: 150px;
      cursor: pointer;
      &:hover {
        background: #08c;
        color: #ffffff !important;
      }
    }
  }
  .side-bar {
    position: absolute;
    display: flex;
    left: 0;
    top: 0;
    height: 100%;
    .bar {
      text-align: center;
      font-size: 14px;
      position: relative;
      z-index: 10;
      background: #444;
      li {
        cursor: pointer;
        color: #bfbdbd;
        padding: 8px;
        width: 50px;
        p {
          span {
            font-size: 19px;
          }
          margin-bottom: 5px;
        }
        &.active {
          color: #ffffff;
        }
      }
    }
    .contents {
      position: relative;
      z-index: 9;
    }
    .searchList {
      position: relative;
      left: 0;
      z-index: 9;
      .searchList_content {
        // position: absolute;
        // left:226px;
        width: 226px;
        height: 100%;
        background: #ffffff;
        border-right: 1px solid #e0e0e0;
        border-left: 1px solid #e0e0e0;
        overflow-y: auto;
        &.loading {
          height: 100%;
          display: flex;
          align-items: center;
          justify-content: center;
        }
      }
    }
    .timelineBar {
      // position: absolute;
      height: 100%;
      position: relative;
      z-index: 9;
      .contentLine {
        position: fixed;
        padding-left: 50px;
        bottom: 0;
        width: 100%;
        left: 0;
      }
    }
    .content {
      position: relative;
      top: 0;
      height: 0;
      width: 0;
      transition: width 0.6s;
      -webkit-transition: width 0.6s; /* Safari */
      padding-top: 0px;
      background: #ffffff;
      .padd {
        padding: 20px 20px;
      }
      &.activity {
        width: 226px;
        height: 100%;
      }
      .search-condition {
        padding: 0 8px;
      }
    }
  }
  .side-panel {
    position: absolute;
    left: 48px;
    top: 0;
    height: 100%;
    box-sizing: border-box;
    background-color: #f9f9f9;
  }
  .main {
    width: 100%;
    height: 100%;
    background: #ccc;
    position: absolute;
    top: 0;
    .tootip {
      position: absolute;
      width: 100%;
      top: 0;
      padding-left: 50px;
      z-index: 99999999;
    }
    .map {
      position: absolute;
      width: 100%;
      height: 100%;
    }
  }
  .right_info {
    position: absolute;
    border-left: 1px solid #e0e0e0;
    width: 25%;
    right: 0;
    top: 0;
    background: #f9f9f9;
    height: 100%;
    &.detail-pane {
      position: absolute;
      top: 0;
      left: 0;
      bottom: 0;
      left: auto !important;
      width: 25%;
      min-width: 200px !important;
      -webkit-transform: none !important;
      -moz-transform: none !important;
      -o-transform: none !important;
      transform: none !important;
      -webkit-transition-property: -webkit-transform;
      -moz-transition-property: -moz-transform;
      -o-transition-property: -o-transform;
      transition-property: transform;
      -webkit-transition-timing-function: ease-in-out;
      -moz-transition-timing-function: ease-in-out;
      -o-transition-timing-function: ease-in-out;
      transition-timing-function: ease-in-out;
      -webkit-transition-duration: 0.2s;
      -moz-transition-duration: 0.2s;
      -o-transition-duration: 0.2s;
      transition-duration: 0.2s;
      visibility: visible;
      right: 0;
      height: 100%;
    }
  }
}
.slide-fade-enter-active {
  transition: all 1.5s ease;
}
.slide-fade-leave-active {
  transition: all 0s cubic-bezier(1, 0.5, 0.8, 1);
}
.slide-fade-enter, .slide-fade-leave-to
/* .slide-fade-leave-active for below version 2.1.8 */ {
  opacity: 0;
}
</style>
<style lang="less">
.property-value {
  .GisData {
    width: 60%;
    .latLon {
      display: flex;
      align-content: center;
    }
    .el-input {
      padding: 3px 0;
      width: 100% !important;
    }
  }
  .el-input {
    width: 100% !important;
  }
}
</style>
